<template>
	<z-paging class="app-container" ref="paging" :fixed="false" refresher-only @query="getData">
		<view class="my-integral">
			<image class="cover-image" src="/static/images/sign-in-bg.png" mode="aspectFill" />
			<view class="content">
				<view class="value">{{ integral }}</view>
				<view class="label">我的积分</view>
			</view>
		</view>
		<view class="sign-in-box">
			<view class="title-box flex">
				<text class="label">本周已签到</text>
				<text class="value"> {{ signInDays }} </text>
				<text class="label">天</text>
			</view>
			<view class="desc">
				再签到{{ notSignInDays }}天，可获得{{ canGetIntegral }}积分
			</view>
			<view class="sign-in-list flex">
				<view v-for="item in signList" :key="item.id" class="sign-in-item flex-column"
					:class="{ active: item.checked === 1, error: item.unixtime < currentTime && item.checked === 0 }">
					<view class="item-box flex-column">
						<text class="integral">+{{ item.point }}</text>
						<uni-icons v-if="item.checked === 1" type="checkbox-filled" size="48rpx"
							color="var(--primary-color)"></uni-icons>
						<uni-icons v-if="item.unixtime < currentTime && item.checked === 0" type="clear" size="48rpx"
							color="#DD524D"></uni-icons>
						<text v-if="item.checked === 0 && item.unixtime >= currentTime"
							class="date">{{ parseTime(new Date(), "{y}-{m}-{d}") === item.date ? "今天" : parseTime(item.date, "{m}.{d}") }}</text>
					</view>
					<view class="week">{{ parseTime(item.date, "周{a}") }}</view>
				</view>
			</view>
			<button type="primary" class="sign-in-button" hover-class="is-hover" :disabled="iSsignIn"
				@click="handleSignIn">{{ iSsignIn ? "今日已签到" : "立即签到" }}</button>
		</view>
		<view class="task-list-box">
			<TaskList :task-list="taskList" @refreshTask="getData" />
		</view>
	</z-paging>
</template>

<script setup>
	import {
		computed,
		getCurrentInstance,
		reactive,
		ref,
		toRefs
	} from "vue";
	import TaskList from "@/components/TaskList";
	import {
		listSignInData,
		listTask,
		signIn
	} from "@/api";

	const state = reactive({
		signList: [],
		taskList: [],
		integral: 0
	});

	const {
		signList,
		taskList,
		integral
	} = toRefs(state);

	const paging = ref(null);
	const proxy = getCurrentInstance().appContext.config.globalProperties;

	// 今日是否已签到
	const iSsignIn = computed(() => {
		const today = signList.value.find(item => item.date === proxy.parseTime(new Date(), "{y}-{m}-{d}"));
		return today && today.checked;
	})

	// 当前时间的时间戳
	const currentTime = computed(() => {
		return Date.now() / 1000 - 24 * 60 * 60;
	})

	// 本周已签到天数
	const signInDays = computed(() => {
		return signList.value.filter(item => item.checked === 1).length;
	})

	// 本周未签到次数
	const notSignInDays = computed(() => {
		return signList.value.filter(item => item.unixtime >= currentTime.value && item.checked === 0).length;
	})
	
	// 本周还可获取的积分
	const canGetIntegral = computed(() => {
		const notSignIn = signList.value.filter(item => item.unixtime >= currentTime.value && item.checked === 0);
		const totalIntegral = notSignIn.reduce((total, current) => {
			return Number(total) + Number(current.point);
		}, 0);
		return totalIntegral;
	})

	// 获取签到中心数据
	async function getSignInData() {
		const res = await listSignInData();
		signList.value = res.data.list;
		integral.value = res.data.point;
	}

	// 获取任务列表
	async function getTaskList() {
		const res = await listTask();
		taskList.value = res.data.list;
	}

	// 签到按钮操作
	async function handleSignIn() {
		await signIn();
		uni.showToast({
			title: "签到成功"
		})
		setTimeout(() => {
			// 刷新数据
			paging.value.reload();
		}, 1000)
	}

	// 获取数据
	async function getData() {
		await getSignInData();
		await getTaskList();
		paging.value.complete();
	}

	getData()
</script>

<style scoped lang="scss">
	.app-container {
		display: block;

		.my-integral {
			width: 100%;
			height: 300rpx;
			overflow: hidden;
			position: relative;

			.content {
				position: absolute;
				top: 36rpx;
				left: 40rpx;

				.value {
					font-size: 60rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.label {
					font-size: 30rpx;
					color: #CCDDFF;
				}
			}
		}

		.sign-in-box {
			height: 480rpx;
			margin: -107rpx 20rpx 20rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			position: relative;
			z-index: 1;

			.title-box {
				font-weight: bold;
				align-items: flex-end;

				.label {
					font-size: 30rpx;
				}

				.value {
					font-size: 50rpx;
					line-height: 50rpx;
				}
			}

			.desc {
				font-size: 24rpx;
				color: var(--gray-font-color);
				margin-top: 20rpx;
				margin-bottom: 40rpx;
			}

			.sign-in-list {
				column-gap: 10rpx;
				justify-content: center;

				.sign-in-item {
					align-items: center;

					&.active {
						.item-box {
							background-color: #E5EEFF;

							.integral {
								color: var(--primary-color);
								margin-bottom: 10rpx;
							}
						}
					}

					&.error {
						.item-box {
							background-color: rgba(221, 82, 77, 0.2);

							.integral {
								color: #DD524D;
								margin-bottom: 10rpx;
							}
						}
					}

					.item-box {
						background-color: #F2F4F7;
						align-items: center;
						width: 85rpx;
						height: 120rpx;
						border-radius: 10rpx;

						.integral {
							font-size: 26rpx;
							margin-top: 26rpx;
							margin: 20rpx 0;
						}

						.date {
							font-size: 20rpx;
							color: var(--gray-font-color);
						}
					}

					.week {
						font-size: 20rpx;
						color: var(--gray-font-color);
						margin-top: 15rpx;
					}
				}
			}

			.sign-in-button {
				margin-top: 60rpx;
			}
		}

		.task-list-box {
			margin: 0 20rpx;
		}
	}
</style>